<!DOCTYPE html>
<html lang="en" xmlns:th="http://thymeleaf.org">
<head>
    <th:block th:include="include :: header('菜单')"/>
    <th:block th:include="include ::select2-css"/>
    <style>
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 300px;
            overflow-y: auto;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
   <div class="ibox">
       <div class="ibox-content">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li class="active">
                    <a data-toggle="tab" href="#tab-1" aria-expanded="true">菜单</a>
                </li>
                <li class="">
                    <a data-toggle="tab" href="#tab-2" aria-expanded="false">操作</a>
                </li>
            </ul>
            <div class="tab-content">
                <div id="tab-1" class="tab-pane active">
                    <div class="panel-body">
                        <form class="form form-horizontal" id="menuForm" autocomplete="off">
                            <input type="hidden" name="id" id="id" th:value="${id}">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">父菜单：</label>
                                <div class="col-sm-4">
                                    <select id="parentId" name="parentId" class="form-control m-b" >
                                        <option th:each="menu,menuStat:${menuSel}" th:value="${menu.id}">[[${menu.name}]]</option>
                                      
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">菜单名称：</label>
                                <div class="col-sm-4">
                                    <input type="text" name="menuName" id="menuName" class="form-control" data-rule="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">请求地址：</label>
                                <div class="col-sm-4">
                                    <input type="text" name="menuUrl" id="menuUrl" class="form-control">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">权限标识：</label>
                                <div class="col-sm-4">
                                    <input type="text" name="roleTag" id="roleTag" class="form-control">
                                    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">图标：</label>
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <input type="text" name="menuIcon" id="menuIcon" class="form-control"> <span class="input-group-btn">
                                            <button type="button" class="btn btn-primary" onclick="showicon();">
                                                搜索图标
                                            </button>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label is-required">排序：</label>
                                <div class="col-sm-4">
                                    <input type="number" name="menuSort" id="menuSort" class="form-control" data-rule="required">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-9">
                                    <textarea name="remark" id="remark" cols="60" rows="4"></textarea>
                                </div>
                            </div>
                            <input type="hidden" name="funcs" id="funcs" class="form-control">
                        </form>
                    </div>
                </div>
                <div id="tab-2" class="tab-pane">
                    <div class="panel-body">
                        <form class="form form-horizontal" id="funcForm" autocomplete="off">
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>权限标识</th>
                                        <th>排序</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="optbody">
                                    <tr>
                                        <td> <input type="text" placeholder="名称" class="form-control" value="新增" data-rule="required"></td>
                                        <td> <input type="text" placeholder="权限标识" class="form-control" value="admin:sysmenu:add" data-rule="required"></td>
                                        <td width="100"> <input type="number" placeholder="排序" class="form-control" value="1" data-rule="required" min="1"></td>
                                        <td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>
                                        <td style="display:none;"><input type="hidden" value="0"></td>
                                    </tr>
                                </tbody>
                                <tfoot>
                                    <TR>
                                        <TD colspan="8">
                                            <button class="btn btn-info " onclick="addrow(this)"><i class="fa fa-plus"></i></button>
                                        </TD>
                                    </TR>

                                </tfoot>
                            </table>
                        </form>
                    </div>
                </div>


            </div>
            <div class="footerbar">
                <div class="col-sm-12 col-sm-offset-3">
                    <button class="btn btn-primary" type="button" onclick="save()">
                        <i class="fa fa-check"></i>
                        保存
                    </button>
                    <button class="btn btn-danger" type="button" onclick="cancel()">
                        <i class="fa fa-reply-all"></i>关闭
                    </button>
                </div>
            </div>
        </div>
       </div>
   </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<!-- jquery-validate 表单树插件 -->
<script type="text/javascript" th:inline="javascript">
     var rowIndex = 3, menuform = false, funcstatus = false;
        $(function () {
            $("#parentId").select2();
            // $('#parentId').on('select2:select', function (e) {
            //     // 处理自己的业务
            //     console.log(e);
            //     console($(e).select2('val'));
            // });
            $('#menuForm').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    menuform = true;
                },
                invalid: function (form) {
                    menuform = false;
                }
            });
            $('#funcForm').validator({
                stopOnError: false,
                timely: 2,
                theme: "yellow_right",
                valid: function (form) {
                    funcstatus = true;
                },
                invalid: function (form, errors) {
                    funcstatus = false;
                    // console.log(errors);
                }
            });
            jutils.handleMessage(function(res){
                if(res.title=='fontPick'){
                    $('#menuIcon').val(res.icon);
                }

            });

            loadData();

        });


        function loadData() {
            const id = $("#id").val();
             if(jutils.emptyId(id)){
                 return;
             }
             jutils.ajaxGet('/admin/sysmenu/GetModel',{ id: id },
                    function (res) {
                       const model=res.data.model;
                        $('#menuForm').initFormData(model.menu);
                        $("#parentId").select2("val", [model.menu.parentId]);
                        const funcs = model.funcList;
                        const flen = funcs.length;
                        rowIndex = 0;
                        let html = '';
                        if (flen > 0) {
                            for (let i = 0; i < flen; i++) {
                                let model = funcs[i];
                                rowIndex++;
                                html += '<tr>';
                                html += '<td> <input type="text" placeholder="名称" class="form-control" value="' +model.funcTitle +'" data-rule="required"></td>';
                                html += '<td> <input type="text" placeholder="权限标识" class="form-control" value="' +model.roleTag +'" data-rule="required"></td>';
                                html += '<td width="100"> <input type="number" placeholder="排序" class="form-control" value="' + model.funcSort + '" data-rule="required" min="1"></td>';
                                html +=
                                    '<td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>';
                                html += '<td style="display:none;"><input type="hidden" value="' + model.id + '"></td>';
                                html += ' </tr>';
                            }
                        }
                        $('#optbody').html(html);
                    });
        }

        function save() {

            $('#menuForm').trigger("validate");
            if (!menuform) {
                jutils.error('菜单内容验证失败');
                return;
            }
            var funcArry = [];
            var hasops = $('#optbody').find("tr").length;
            if (hasops > 0) {
                $('#funcForm').trigger("validate");
                if (!funcstatus) {
                    jutils.error('操作内容验证失败');
                    return;
                }

                $('#optbody').find("tr").each(function () {
                    var func = {
                        id: 0,
                        title: '',
                        roleTag: '',
                        funcSort: 1
                    };

                    // var d = $(this).find('input');
                    //console.log($(this).find('input'));
                    $(this).find('input').each(function (index, element) {
                        var itext = $(this).val();
                        if (index === 0) {
                            func.title = itext;
                        } else if (index === 1) {
                            func.roleTag = itext;
                        } else if (index === 2) {
                            func.funcSort = itext;
                        } else if (index === 3) {
                            func.id = itext;
                        }
                    });

                    funcArry.push(func);
                });


            }

            // console.log(funcArry);
            //return;
            if (funcArry.length > 0) {
                const fjson = JSON.stringify(funcArry);
                $('#funcs').val(fjson);
            }

            jutils.ajaxPost('/admin/sysmenu/SaveData',
                $('#menuForm').serialize(),
                function (res) {
                   cancel();
                });
            // console.log(funcArry);
        }

        function delrow(obj) {
            var id = $(obj).parent().next('td').find('input').val();
            if (id !== '0') {
                jutils.confirm('删除当前操作，可能会影响系统权限，确认删除吗？',
                    function () {
                        jutils.ajaxPost('/admin/sysmenu/delfunc',
                            { id: id },
                            function (res) {
                                var $tr = $(obj).parent().parent('tr');
                                $tr.remove();
                                rowIndex--;
                            });
                    });

            } else {
                var $tr = $(obj).parent().parent('tr');
                $tr.remove();
                rowIndex--;
            }

        }

        function addrow() {
            rowIndex++;
            var html = '<tr>';
          
            html += '<td> <input type="text" placeholder="名称" class="form-control" value="" data-rule="required"></td>';
            html +=
                '<td> <input type="text" placeholder="权限标识" class="form-control" value="system:roletag:new" data-rule="required"></td>';
            html += '<td width="100"> <input type="number" placeholder="排序" class="form-control" value="0" data-rule="required" min="1"></td>';
            html +=
                '<td><button class="btn btn-danger " onclick="delrow(this)"><i class="fa fa-trash"></i></button></td>';
            html += '<td style="display:none;"><input type="hidden" value="0"></td>';
            html += ' </tr>';
            $('#optbody').append(html);

        }

        function cancel() {
           
           // jutils.closeDialog();
           jutils.postMessage('menuForm',"message from menu form hehe");
           jutils.closeTab('menuForm');
        }

        function showicon(rowIndex) {
            rowIndex = rowIndex || 0;
            var findex = layer.open({
                'title':'设置图标',
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: '/fontawesome.html?id=' + rowIndex
            });
            layer.full(findex);
        }
</script>
</body>
</html>